<template>
<!--  <el-row class="row-wrap">-->
<!--    <el-col :span="11">-->
<!--      <el-card>-->
<!--        <template #header>-->
<!--          <h1>普通树形</h1>-->
<!--        </template>-->
<!--        <CustomTable-->
<!--            :col="col"-->
<!--            rowKey="id"-->
<!--            :tableData="tableData1">-->
<!--        </CustomTable>-->
<!--      </el-card>-->
<!--    </el-col>-->
<!--    <el-col :span="11">-->
<!--      <el-card>-->
<!--        <template #header>-->
<!--          <h1>懒加载树形</h1>-->
<!--        </template>-->
<!--        <CustomTable-->
<!--            :col="col"-->
<!--            rowKey="id"-->
<!--            :lazy="true"-->
<!--            :load="load"-->
<!--            :tableData="tableData2">-->
<!--        </CustomTable>-->
<!--      </el-card>-->
<!--    </el-col>-->
<!--  </el-row>-->
  <el-card>
    <template #header>
      <h1>懒加载树形</h1>
    </template>
    <CustomTable
        :tableHead="col"
        rowKey="id"
        :lazy="true"
        :load="load"
        :tableData="tableData2">
    </CustomTable>
  </el-card>
</template>

<script lang="ts" setup name='TreeDemo'>
import {} from 'vue'
//表格header
const col: ITableHead[] = [
  {
    label: '国家',
    field: 'country',
    width: 200,
    inputType: 'readonly',
  },
  {
    label: '省份',
    field: 'province',
    width: 200,
    inputType: 'readonly',
  },
  {
    label: '城市',
    field: 'city',
    width: 200,
    inputType: 'readonly',
  },
]
//表格数据
let tableData1 = reactive([
  {
    id: 1,
    country: "中国",
    province: "",
    city: "",
    children: [
      {
        id: 2,
        country: "",
        province: "四川",
        city: '',
        children: [
          {
            id: 3,
            country: "",
            province: "",
            city: '成都',
          }
        ]
      }
    ]
  },
])
let tableData2 = reactive<any>([
  {
    id: 1,
    country: "中国",
    province: "",
    city: "",
    children: [
      {
        id: 2,
        country: "",
        province: "四川",
        city: '',
        hasChildren: true,
      }
    ]
  },
])
//加载函数
const load = (row: any, treeNode: unknown,
              resolve: (date: any[]) => void) => {
  setTimeout(() => {
    resolve([
      {
        id: 3,
        country: "",
        province: "",
        city: '成都',
      }
    ])
  }, 1000)
}
</script>

<style scoped lang='less'>
.row-wrap {
  height: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}
</style>
